<template>
	<view>
		<view class="tablist" v-for="(item,index) in directoryList" 
				:class="{
					active:tabIndex==index
				}">
			<!-- v-for="(item,index) in directoryList" -->
			<view class="conter-s flex-height-between"
			 @click="tabConterIMg(item),tabIndex=index" v-if="index>2">
				<view class="flex-height-between">
					<text class="index">{{index+1}}</text>
					<view class="title ellipsis">{{item.title}}</view>
				</view>
				<view class="teb-icon" v-if="index>2 && !isPay ">
					<image class="teb-icon" :src="imgUrl+'/suo.png'" mode=""></image>
				</view>
			</view>
			<view class="conter-s flex-height-between"
			  @click="tabConterIMg2(item),tabIndex=index" v-else>
				<view class="flex-height-between">
					<text class="index">{{index+1}}</text>
					<view class="title ellipsis">{{item.title}}</view>
				</view>
				<view class="teb-icon" v-if="index>2 && !isPay ">
					<image class="teb-icon" :src="imgUrl+'/suo.png'" mode=""></image>
				</view>
			</view>
			<!-- directoryList -->
			<!-- {{tabIndex==index}} {{tabIndex}}--{{index}} -->
			<view class="activeLIsy"
				:class="{
					accMes:tabIndex==index
				}"
			>
				<view class="tabblItsarr flex-height-between" v-for="(item) in 0">
					<view class="flex-height-between">
						<image class="icon" :src="imgUrl+'/wenbIcon.png'" mode=""></image>
						<view class="title ellipsis">第一章 产品的重要性产品的重要性产品的重要性产品的重要性产品的重要性</view>
					</view>
					<view class="">
						<image class="roght-icon" :src="imgUrl+'/jaintou.png'" mode=""></image>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	// api/special/getCourseList
	import {
		Request
	} from '@/utils/request.js'
	export default {
		props:{
			directoryList:{
				type:[Array,Object],
				default:()=>[]
			},
			isPay:{
				type:Number,
				Request:true
			},
		},
		components:{
		},
	    data() {
	        return {
				tabIndex:0,
				tabIdL:'',
				imgUrl:this.imgUrl,
	        }
	    },
		onLoad({id}) {
		},
	    methods: {
			tabConterIMg(e){				
				this.$emit('onLink',e)
			},
			tabConterIMg2(e){
				this.$emit('onLink2',e)
			}
	    }
	}
</script>

<style scoped>
	.tablist{
		min-height: 88rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		box-sizing: border-box;
		margin-bottom: 16rpx;
		padding-bottom: 1rpx;
	}
	.conter-s{
		padding: 24rpx;
	}
	.conter-s .index{
		width: 40rpx;
		height: 40rpx;
		background: #F2F4F7;
		border-radius: 50%;
		text-align: center;
		line-height: 40rpx;
		font-family: MiSans, MiSans;
		font-weight: 600;
		font-size: 24rpx;
		color: #8F9294;
		font-style: normal;
		margin-right: 16rpx;
		text-transform: none;
	}
	.conter-s .title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		max-width: 560rpx;
		font-style: normal;
		text-transform: none;
	}
	.conter-s .teb-icon{
		width: 24rpx;
		display: flex;
		height: 24rpx;
	}
	.tabblItsarr{
		width: 654rpx;
		height: 80rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: linear-gradient( 90deg, #F0F2FC 0%, #F7F8FA 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		margin-bottom: 24rpx;
	}
	.active{
		background: #E5E8F7;
	}
	.tabblItsarr .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #646669;
		max-width: 530rpx;
		font-style: normal;
		text-transform: none;
	}
	.tabblItsarr .icon{
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}
	.tabblItsarr .roght-icon{
		width: 16rpx;
		height: 16rpx;
	}
	.activeLIsy{
		height: 0;
		overflow: hidden;
		transition: 1s;
	}
	.accMes{
		height: auto !important;
	}
</style>